<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>大转盘中奖核销</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getStart()">搜索</el-button>
            </el-input>
            <el-select style="margin-left: 20px" v-model="type" clearable  @change="getSelect()" placeholder="请选择KTV查询" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="line-height: 32px; float:right;flex: 1">江南风转KTV：核销{{ dataTotal}}次</span>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="user_id"-->
            <!--label="id">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="coupon_code"
            label="券码">
          </el-table-column>
          <el-table-column
            prop="get_time"
            label="获取时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.get_time) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="shop_id"
            label="店铺id">
          </el-table-column>
          <el-table-column
            prop="use_time"
            label="核销时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.use_time) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="店铺名称">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            prop="audit_number"
            label="核销次数">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="用户手机">
          </el-table-column>
          <el-table-column
            prop="operate"
            label="核销人员">
          </el-table-column>

        </el-table>
        <!--分页-->
        <el-col :span="24" style="margin-top: 15px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>

  </div>
</template>

<script>

  export default {
    name: "Verifi",
    mounted() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getStart()
    },
    data() {
      return {
        contentVisible:false,
        contentValue:'',
        addVisible:false,
        serchValue:'',
        type:'',
        addSelectValue:0,
        tableData: [],
        pageSize: 10,
        page: 1,
        currentPage: 1,
        key:'',
        selectkey: '',
        dataTotal: 0,
        multipleSelection: [],
        formLabelWidth: '80px',
        options: [
          {
            value: '1',
            label: '江南风转KTV'
          },
          {
            value: '2',
            label: 'KTV'
          },
        ],
      }
    },
    methods: {
      // 获取数据
      getStart() {
        let thi = this

        const por = {
          page: thi.page,
          pageSize: thi.pageSize,
          key: thi.key,
          shop_id:thi.$store.state.login.user.id
        }
        thi.mySelectAll('recordDestroyList', por).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total.sum_number

        })

      },

      formatDate (date) {
        if(!date){
          return "无"
        }
        Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate()
          + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
        };
        var unixTimestamp = new Date(date * 1000)
        return unixTimestamp.toLocaleString();
      },
      getSelect(){
        this.page = 1
        this.getStart()
      },


      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getStart()
      },
      //跳转页面
      handleCurrentChange(val) {
        this.currentPage = val
        this.getStart()
      },
    }
  }
</script>

<style scoped>
  .admin-body {
    width: 100%;
  }
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
